<template>
  <div id="app">
    <transition name="slide-fade">
      <router-view v-if="!$route.meta.keepAlive" />
    </transition>
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <div style="height: 1rem; width: 100%" v-if="$store.state.songMsg != '' && ($route.name != 'Play')&&($route.name != 'Comments')"></div>
    <div
      class="bottom-play"
      @click="handleClick"
      v-if="$store.state.songMsg != '' && ($route.name != 'Play')&&($route.name != 'Comments')"
    >
      <div class="album-pic">
        <img :src="$store.state.songMsg.picUrl" alt="" />
      </div>
      <div class="song-msg">
        <span>{{ $store.state.songMsg.name }}</span
        ><span>-{{ $store.state.songMsg.artists[0].name }}</span>
      </div>
      <div data-util="play" class="util-play">播放</div>
      <div data-util="random" class="util-random">随机</div>
    </div>
  </div>
</template>

<script>
// import {lyricSplit} from '@/utils/lyricSplit'
export default {
  name: "App",
  methods: {
    handleClick(e) {
      if (e.target.getAttribute("data-util") == null) {
        this.$router.push("/play");
      }
    },
  },
  mounted() {
    // console.log(lyricSplit())
    let audio = document.createElement("AUDIO");
    let _this = this;
    audio.ontimeupdate = function () {
      _this.$store.commit("UPDATE_SONG_MSG", { currentTime: this.currentTime });
    };
    this.$store.commit("SET_AUDIO", audio);
  },
};
</script>
<style lang="less">
@import url("./assets/public/common.less");
.bottom-play {
  position: fixed;
  bottom: 0;
  right: 0;
  left: 0;
  height: 1rem;
  background: #fff;
  .flex-contaniner(center,space-around);
  .album-pic {
    width: 1rem;
    height: 0.8rem;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .song-msg {
    width: 2rem;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }
}
</style>
<style >
#app {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
router-view {
  width: 100%;
  height: 100%;
}
.slide-fade-enter-active {
  position: absolute;
  width: 100%;
  height: 100%;
  transition: all 0.3s ease;
  z-index: 99;
}
.slide-fade-leave-active {
  z-index: -1;
  position: absolute;
  width: 100%;
  height: 100%;
  transition: all 0.2s cubic-bezier(1, 0.5, 0.8, 1);
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */ {
  transform: translateX(20px);
  opacity: 0;
}

@import url("./assets/public/public.css");
</style>


